---
name: VisibilityManager
route: /visibility-manager
menu: Utilities
---

import { Playground, Props } from 'docz';
import VisibilityManager from '../index';

# VisibilityManager

Used to hide contents before a motion is complete after being triggered from a child [Motion](/motion) component.
If there is more than one child [Motion](/motion) you can use an optional name prop which should match the appropriate [Motion](/motion) component.

If it is the initial mount it will be shown **after** its child motion has finished unless you set `isInitiallyVisible`.

> **Tip -** See [Delay showing content until all motions have finished](/advanced-usage#delay-showing-content-until-all-motions-have-finished) for more information on how to use this component.

## Usage

```js
import Motion, { VisibilityManager } from '@element-motion/core';

const ItemDetails = ({ description }) => (
  <VisibilityManager>
    {({ style }) => (
      <React.Fragment>
        <Motion name={`item-${index}`}>{motion => <div {...motion} />}</Motion>

        <div style={style}>{description}</div>
      </React.Fragment>
    )}
  </VisibilityManager>
);
```

> **Tip -** We used `visibility` over `opacity` because it allows us to have fine grained control for hiding elements.
> You can hide the container around an animating element and the animating element will still be visible for example.

## Props

<Props of={VisibilityManager} />
